let selectedAnnotation = null;

window.addEventListener('load', () => {
    const canvas = document.getElementById('connectorCanvas');
    const ctx = canvas.getContext('2d');

    function drawConnectors() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        // 清空画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        if (selectedAnnotation) {
            const targetId = selectedAnnotation.dataset.target;
            const target = document.getElementById(targetId);

            if (target) {
                const targetRect = target.getBoundingClientRect();
                const annotationRect = selectedAnnotation.getBoundingClientRect();
                // 获取垂直滚动偏移量
                const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

                const startX = targetRect.right;
                // 加上滚动偏移量
                const startY = targetRect.top + targetRect.height / 2 + scrollTop;
                const endX = annotationRect.left;
                const endY = annotationRect.top + annotationRect.height / 2 + scrollTop;

                // 计算中间点，用于绘制折线
                const midX = startX + (endX - startX) / 2;
                const midY1 = startY;
                const midY2 = endY;

                ctx.beginPath();
                ctx.setLineDash([5, 5]);
                ctx.moveTo(startX, startY);
                ctx.lineTo(midX, midY1);
                ctx.lineTo(midX, midY2);
                ctx.lineTo(endX, endY);
                ctx.strokeStyle = 'gray';
                ctx.stroke();
            }
        }
    }

    drawConnectors();
    window.addEventListener('resize', drawConnectors);
    // 监听滚动事件，滚动时重新绘制连接线
    window.addEventListener('scroll', drawConnectors);
});

function highlightText(annotation) {
    // 移除所有批注和原文的高亮状态
    document.querySelectorAll('.annotation').forEach(anno => {
        anno.classList.remove('highlighted');
    });
    document.querySelectorAll('.main-text p').forEach(text => {
        text.classList.remove('highlighted-text');
    });

    // 添加当前批注和对应原文的高亮状态
    annotation.classList.add('highlighted');
    const targetId = annotation.dataset.target;
    const target = document.getElementById(targetId);
    if (target) {
        target.classList.add('highlighted-text');
    }

    // 记录当前选中的批注
    selectedAnnotation = annotation;

    // 重新绘制连接线
    const canvas = document.getElementById('connectorCanvas');
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    const drawConnectors = () => {
        if (selectedAnnotation) {
            const targetId = selectedAnnotation.dataset.target;
            const target = document.getElementById(targetId);

            if (target) {
                const targetRect = target.getBoundingClientRect();
                const annotationRect = selectedAnnotation.getBoundingClientRect();
                // 获取垂直滚动偏移量
                const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

                const startX = targetRect.right;
                // 加上滚动偏移量
                const startY = targetRect.top + targetRect.height / 2 + scrollTop;
                const endX = annotationRect.left;
                const endY = annotationRect.top + annotationRect.height / 2 + scrollTop;

                // 计算中间点，用于绘制折线
                const midX = startX + (endX - startX) / 2;
                const midY1 = startY;
                const midY2 = endY;

                ctx.beginPath();
                ctx.setLineDash([5, 5]);
                ctx.moveTo(startX, startY);
                ctx.lineTo(midX, midY1);
                ctx.lineTo(midX, midY2);
                ctx.lineTo(endX, endY);
                ctx.strokeStyle = 'gray';
                ctx.stroke();
            }
        }
    };
    drawConnectors();
}

const dashedLine = document.querySelector('.dashed-line');

// 计算虚线位置
function updateDashedLinePosition() {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
    
    // 根据滚动位置更新虚线位置
    dashedLine.style.top = `${scrollTop}px`;
    dashedLine.style.left = `${scrollLeft}px`;
}

// 页面加载时初始化位置
window.addEventListener('load', updateDashedLinePosition);

// 滚动时更新位置
window.addEventListener('scroll', updateDashedLinePosition);


function drawDashedConnector() {
    // 假设起点和终点元素的 ID 分别为 start-element 和 end-element
    const startElement = document.getElementById('start-element');
    const endElement = document.getElementById('end-element');
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // 初始化画布
    canvas.style.position = 'fixed';
    canvas.style.top = 0;
    canvas.style.left = 0;
    canvas.style.pointerEvents = 'none';
    document.body.appendChild(canvas);
    
    function drawDashedLine() {
        if (startElement && endElement) {
            // 获取元素相对于文档的位置
            const startRect = startElement.getBoundingClientRect();
            const endRect = endElement.getBoundingClientRect();
    
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
    
            // 计算起始和结束点坐标
            const startX = startRect.left + startRect.width / 2 + scrollLeft;
            const startY = startRect.top + startRect.height / 2 + scrollTop;
            const endX = endRect.left + endRect.width / 2 + scrollLeft;
            const endY = endRect.top + endRect.height / 2 + scrollTop;
    
            // 设置画布大小
            canvas.width = document.documentElement.scrollWidth;
            canvas.height = document.documentElement.scrollHeight;
    
            // 清空画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);
    
            // 绘制虚线
            ctx.beginPath();
            ctx.setLineDash([5, 5]);
            ctx.moveTo(startX, startY);
            ctx.lineTo(endX, endY);
            ctx.strokeStyle = '#000';
            ctx.stroke();
        }
    }
    
    // 页面加载时绘制
    window.addEventListener('load', drawDashedLine);
    
    // 滚动时重新绘制
    window.addEventListener('scroll', drawDashedLine);
    
    // 窗口大小改变时重新绘制
    window.addEventListener('resize', drawDashedLine);
}

// 页面加载时绘制
window.addEventListener('load', drawDashedConnector);